<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>分类列表</title>
</head>
<body>
<!--后台一级导航栏-->
<div th:replace="~{commons/admin_com::menu(activeUrl='types.html')}"></div>

<br>
<br>
<br>

<!--中间部分-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">

        <div class="ui success message" th:if="${!#strings.isEmpty(msg)}">
            <i class="close icon"></i>
            <div class="header">提示：</div>
            <span th:text="${msg}"></span>
        </div>

        <!--隐藏域 删除分类ID，将Post请求方式装换成Delete-->
        <form action="" id="toDelete" method="post">
            <input type="hidden" name="_method" value="delete">
        </form>

        <div class="ui attached segment">
            <!--博客列表-->
            <table class="ui celled compact table" style="text-align: center;">
                <!--表头-->
                <thead>
                <tr>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <!--表体-->
                <tbody>
                <tr th:each="type : ${pageInfo.list}">
                    <td th:text="${type.name}">Java从入门到入坟</td>
                    <td>
                        <a th:href="@{/admin/types/} + ${type.id}" class="ui mini blue basic button">编辑</a>
                        <a th:href="@{/admin/types/} + ${type.id}" id="deleteType"
                           class="ui mini red basic button" onclick="return confirm('确定要删除么?')">删除</a>
                    </td>
                </tr>
                </tbody>

                <div class="ui tiny modal">
                    <i class="close icon"></i>
                    <div class="header">
                        删除你的分类
                    </div>
                    <div class="content">
                        <div class="description">
                            你确定删除你的分类吗
                        </div>
                    </div>
                    <div class="actions">
                        <div class="ui cancel red button">No</div>
                        <a class="ui approve right labeled green icon button"><i class="right check icon"></i>Yes</a>
                    </div>
                </div>


                <!--表脚-->
                <tfoot>
                <tr>
                    <th colspan="12">
                        <div class="ui left floated pagination mini menu">
                            <a th:href="@{/admin/types}" class="item"
                               th:classappend="${pageInfo.isFirstPage} ? 'disabled'">首页</a>

                            <a th:href="@{/admin/types(pageNum=${pageInfo.hasPreviousPage} ? ${pageInfo.prePage})}"
                               class="item" th:classappend="${pageInfo.isFirstPage} ? 'disabled'">上一页</a>

                            <a th:href="@{/admin/types(pageNum=${pageInfo.hasNextPage} ? ${pageInfo.nextPage})}"
                               class="item" th:classappend="${pageInfo.isLastPage} ? 'disabled'">下一页</a>

                            <a th:href="@{/admin/types(pageNum=${pageInfo.pages})}" class="item"
                               th:classappend="${pageInfo.isLastPage} ? 'disabled'">尾页</a>

                            <div class="ui right floated segment basic vertical m-inline-block">
                                <p>当前第<span th:text="${pageInfo.pageNum}"></span>页，总
                                    <span th:text="${pageInfo.pages}"></span>页，共<span
                                            th:text="${pageInfo.total}"></span>条记录</p>
                            </div>

                        </div>

                        <a href="#" th:href="@{/admin/addType}" class="ui mini right floated green basic button">新增</a>
                    </th>
                </tr>
                </tfoot>
            </table>

        </div>
    </div>

</div>

<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>

<!--引用的 js-->
<th:block th:replace="~{commons/admin_com::script}">
</th:block>


<script>
    // 消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade')
            ;
        });


    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });

    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });

    $('.ui.dropdown')
        .dropdown();

    // 删除分类
    $(function () {
        // 当删除按钮点击时
        $("[id='deleteType']").click(
            function () {
                // 获取删除的超链接
                let href = $(this).attr("href");
                // 获取form表单
                let form = $("#toDelete");
                // 把form的action属性设置成href
                form.attr("action", href);
                // 提交表单
                form.submit();
                // 阻止原来的单击事件
                return false;
            }
        );
    });


    $('.ui.tiny.modal')
        .modal('hide');

    // =================！！留待解决！！=====================
    /* $('.ui.tiny.modal')
         .modal('hide');

     $("[id='deleteType']").click(() => {
         let t = this.href;

         $('.ui.approve').click(() => {
             // 获取删除的超链接
             // let href = $('#deleteType').attr("href");
             let href = t;
             // 获取form表单
             let form = $("#toDelete");
             // 把form的action属性设置成href
             form.attr("action", href);
             // 提交表单
             form.submit();
             // 阻止原来的单击事件
             return false;
         });

         $('.ui.tiny.modal')
             .modal('show');
         return false;
     });
 */

</script>
</body>
</html>